<template>
  <div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">全部</mt-tab-item>
      <mt-tab-item id="2">待解决</mt-tab-item>
      <mt-tab-item id="3">已解决</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div v-if="this.total === '0'" class="noans">暂无数据</div>
        <div class="list">
          <ul class="recomend-list">
            <li class="recommend" v-for="item in data" :key="item.index" @click="gotolist(item)">
              <div class="explain">
                <span class="money" type="number">￥:{{item.chargePrice | Strings }}</span>{{item.title}}</div>
            </li>
          </ul>
          <div class='more' v-if="this.total !== '0'" @click="loadMore">点击加载更多...</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div v-if="this.total === '0'" class="noans">暂无数据</div>
        <div class="list">
          <ul class="recomend-list">
            <li class="recommend" v-for="item in data" :key="item.index" @click="gotolist(item)">
              <div class="explain">
                <span class="money" type="number">￥:{{item.chargePrice | Strings }}
                </span>{{item.title}}</div>
              <div class="solve">待解决</div>
            </li>
          </ul>
          <div class='more' v-if="this.total !== '0'" @click="loadMore">点击加载更多...</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div v-if="this.total === '0'" class="noans">暂无数据</div>
        <div class="list">
          <ul class="recomend-list">
            <li class="recommend" v-for="item in data" :key="item.index" @click="gotolist(item)">
              <div class="explain">
                <span class="money" type="number">￥:{{item.chargePrice | Strings }}
                </span>{{item.title}}</div>
              <div class="solve">已解决</div>
            </li>
          </ul>
          <div class='more' v-if="this.total !== '0'" @click="loadMore">点击加载更多...</div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import { education as Api } from '../../api/education';
export default {
  data() {
    return {
      sidebarShow: false,                   // 侧边栏初始状态
      data: [],                               // 初始化首页新闻数据
      bottomDistance: 70,                    // 上拉加载最小距离
      bottomStatus: '',                      // 底部状态
      topStatus: '',                           // 顶部状态
      scroll: '',
      list: '',
      selected: '1',
      query: {
        pageNum: 1,
        questionStatus: ''
      },
      total: '',
      lenList: '',
      toSt: ''
    };
  },
  filters: {
    Strings: function(value) {
      if (value === '0.00') {
        return String('免费');
      }
      return String(value);
    }
  },
  watch: {
    selected: function(val, oldVal) {
      if (val === '1') {
        this.query.questionStatus = '';
        this.query.pageNum = '1';
        this.inits();
      }
      if (val === '2') {
        this.query.questionStatus = '0';
        this.query.pageNum = '1';
        this.inits();
      }
      if (val === '3') {
        this.query.questionStatus = '1';
        this.query.pageNum = '1';
        this.inits();
      }
    }
  },
  methods: {
    init() {
      Api.queryMyQuestionList.call(this, this.query, data => {
        this.total = data.total;
        let newList = data.questionList;
        for (let i = 0; i < newList.length; i++) {
          this.data.push(newList[i]);
        }
      });
      this.lenList = this.data.length;
    },
    inits() {
      Api.queryMyQuestionList.call(this, this.query, data => {
        this.data = data.questionList;
      });
    },
    gotolist(item) {
      this.$router.push({ path: `/Details`, query: { type: item.type, id: item.id } });
    },
    loadMore() {
      this.toSt = this.lenList.toString();
      if (this.toSt === this.total) {
        this.$message('已经到达最后了');
      }
      this.query.pageNum++;
      this.init();
    }
  },
  created() {
    let getUrlStr = function(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    };
    let code = getUrlStr('code');
    if (code === null) {
      this.init();
    }
  }
};
</script>

<style lang="less">
.noans {
  height: 7rem;
  text-align: center;
  line-height: 7rem;
  font-size: .5rem;
  color: #ccc;
}

.mint-tab-item {
  padding: 0 !important;
  .mint-tab-item-label {
    line-height: 4;
  }
}

.is-selected {
  border-bottom: none !important;
  margin-top: -3px;
  .mint-tab-item-label {
    color: inherit;
    font-size: 12px;
    line-height: 4;
    text-align: center;
    border-bottom: 2px solid #F85F48; // width: 40px;
    // margin-left: 2.5rem;
    color: #F85F48;
  }
}

.list {
  margin-bottom: 5rem;
  background: #fff;
  padding-bottom: 1px;
  .recommend {
    position: relative;
    margin: 0 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    list-style: none;
    .explain {
      font-size: 1rem;
      .money {
        color: #F85F48;
      }
    }
    .solve {
      margin-top: 8px;
      color: #E39014;
    }
  }
  .more {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    margin-top: 20px;
  }
}
</style>
